<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../lib/element-ui/index.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="../common/util.js"></script>
    <script src="../../lib/bigscreen/js/vue.min.js"></script>
    <script src="../../lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../lib/layer/layer.js"></script>
    <script src="../../lib/element-ui/index.js"></script>
	<title>子设备管理</title>
</head>
<body>
	<el-container id="app" v-cloak v-loading.fullscreen.lock="fullscreenLoading">
		<el-aside width="170px" :height="aheight">
			<div class="prolist">
				<span>项目列表</span>
			</div>
			<ul class="dashboard-menu">
				<li v-for="(item,index) in sceneData" @click="selectScene(index,item.id)" :class="{'active':(oindex==index)}">
					<i class="el-icon-box"></i><span class="pro-name" v-text="item.name"></span>
				</li>
			</ul>
		</el-aside>
  		<el-container class="sub-el-container">
    		<el-header>
    			<div class="search">
					<el-form :inline="true" :model="param" class="demo-form-inline">
					  <el-form-item label="名称">
					    <el-input v-model="param.name" size="medium" placeholder="名称" clearable ></el-input>
					  </el-form-item>
					  <el-form-item label="网关">
					    <el-select v-model="param.node_id" size="medium" placeholder="请选择">
						   <el-option
						      v-for="item in nodeData"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
						    </el-option>
						</el-select>
					  </el-form-item>
					  <el-form-item>
					    <el-button type="info" size="small" icon="el-icon-search" @click="search" >查询</el-button>
					    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="add" >新增</el-button>
					  </el-form-item>
					</el-form>			
				</div>
    		</el-header>
    		<el-main>
    			<el-table :data="deviceData" :height="height"  style="width: 100%">
	    			<el-table-column type="index" label="序号" width="100"></el-table-column>
	    			<el-table-column prop="name" label="设备名称" >
	    			</el-table-column>
	    			<el-table-column prop="node_name" label="网关名称" >
	    			</el-table-column>
	    			<el-table-column prop="address" label="设备ID" >
	    			</el-table-column>
	    			<el-table-column label="属性设置" >
	    				<template slot-scope="scope">
	    					<el-button type="primary" @click="detailInfo(scope.row)" size="mini" icon="el-icon-document" circle></el-button>
				        </template>
	    			</el-table-column>
	    			<el-table-column  label="操作">
	    				<template slot-scope="scope">
	    					<el-button type="primary" @click="editDevice(scope.row)" size="mini" icon="el-icon-edit" circle></el-button>
	    					<el-button type="danger" @click="deleteDevice(scope.row.id)" size="mini" icon="el-icon-delete" circle></el-button>
				        </template>
	    			</el-table-column>
	  			</el-table>
    		</el-main>
  		</el-container>
  		
  		<el-dialog :title="titleName" :visible.sync="dialogFormVisible"  width="50%" >
			  <el-form :model="postparam" size="medium" class="postparam" >
			    <el-form-item label="名称" :label-width="formLabelWidth" :rules="[{required: true}]" >
			      <el-input v-model="postparam.name" autocomplete="off" placeholder="请输入" ></el-input>
			    </el-form-item>
			    <el-form-item label="设备ID" :label-width="formLabelWidth" :rules="[{required: true}]">
			      <el-input v-model="postparam.address" placeholder="请输入"  autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="网关" :label-width="formLabelWidth" :rules="[{required: true}]">
			        <el-select v-model="postparam.node_id" size="medium" placeholder="请选择">
					   <el-option
					      v-for="item in nodeData"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
					    </el-option>
					</el-select>
			    </el-form-item>
			    <el-form-item label="排序" :label-width="formLabelWidth">
			      <el-input v-model="postparam.seq" type="number" placeholder="请输入" autocomplete="off"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="saveDeviceData" >确 定</el-button>
			  </div>
		</el-dialog>
  		
	</el-container>
	
	<script type="text/javascript">
		var app = new Vue({
			el: '#app' ,
			data: function(){
				return {
					fullscreenLoading :true  ,   // 加载提示 
					param: {
						name: '' ,
						node_id: ''
					} ,
					postparam:{		 // 提交数据
					},
					formLabelWidth: '120px' , 
					height: '' ,
					dialogFormVisible: false ,	// 新增弹窗
					scene_id: '' ,	 // 项目id
					aheight:'' ,
					sceneData: '' ,  // 项目信息
					oindex: 0,		 // 项目选中
					nodeData: '' ,	 // 网关信息
					deviceData : '' ,// 设备信息
					titleName: '新增设备',  // 操作栏名字
				}
			},
			methods: {
				getSceneInfo(data){
					commonAjax('POST',baseurl+"/service/page/scene?paged=1&pageSize=100", data ,function(res){
						if(res.status == 2){
							var dt = res.data.data ;
							app.sceneData = dt ;
							app.scene_id = dt[0].id  ;
							// 查询第一个场景下网关信息
							app.getNodeData( {scene_id: dt[0].id } ); 
							// 查询网关下的设备信息
							app.getDeviceData( {scene_id: dt[0].id } );
						}
					});
				},
				add(){
					this.titleName = '新增设备' ;
					this.dialogFormVisible=true ;
					app.postparam = {} ;
				},
				getNodeData(data){
					commonAjax('POST',baseurl+"/service/page/node?paged=1&pageSize=100", data ,function(res){
						if(res.status == 2){
							var dt = res.data.data ;
							app.nodeData = dt ;
						}else{
							app.nodeData = [] ;
						}
						// 清空
						app.param.node_id = '' ;
					});
				},
				getDeviceData(data){
					commonAjax('POST',baseurl+"/service/page/sensor/device?paged=1&pageSize=100", data ,function(res){
						if(res.status == 2){
							var dt = res.data.data ;
							app.deviceData = dt ;
						}else{
							app.deviceData = [] ;
						}
					});
				},
				search(){
					app.getDeviceData( {scene_id:this.scene_id, node_id: this.param.node_id } );
				},
				selectScene(i,id){
					this.scene_id = id ;
					this.oindex = i ;
					this.getNodeData( {scene_id: id } ); 
					// 回调查询
					app.search() ;
				},
				detailInfo(obj){
					layer.open({
					      type: 2,
					      title: '传感器列表',
					      shadeClose: true,
					      shade: 0.7,
					      maxmin: true, //开启最大化最小化按钮
					      area: ['900px', '90%'],
					      content: baseurl + "/service/iot/sensors_manger?node_id=" + obj.node_id+"&sensor_device_id="+obj.address
					});
				},
				saveDeviceData(){
					if(util.isEmpty(this.postparam.name)){
						app.$message({
					          message: '名称不能为空',
					          type: 'warning',
					          duration:1500
					        });
						return ;
					}
					if(util.isEmpty(this.postparam.address)){
						app.$message({
					          message: '设备ID不能为空',
					          type: 'warning',
					          duration:1500
					        });
						return ;
					}
					
					if( this.postparam.id != null  ){
						commonAjax('PUT',baseurl+"/service/sensor/device.json" , this.postparam  ,function(res){
							if(res.status == 2){
								app.$message({
						          message: '编辑成功',
						          type: 'success',
						          duration:1000
						        });
								
								// 回调查询
								app.search() ;
							}else{
								app.$message.error(res.statusMsg);
							}
							app.postparam = {} ;
							app.dialogFormVisible = false ;
						});
					}else{
						// 保存设备
						commonAjax('POST',baseurl+"/service/sensor/device.json" , this.postparam  ,function(res){
							if(res.status == 2){
								app.$message({
						          message: '添加成功',
						          type: 'success'
						        });
								
								// 回调查询
								app.search() ;
							}else{
								app.$message.error(res.statusMsg);
							}
							app.postparam = {} ;
							app.dialogFormVisible = false ;
						});
					}
				},
				editDevice(obj){
					this.postparam = obj ;
					this.titleName = '编辑设备' ;
					app.dialogFormVisible = true ;
				},
				deleteDevice(id){
					this.$confirm('是否删除该条信息？', '信息确认', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				        	commonAjax('DELETE',baseurl+"/service/sensor/device.json?id="+id , ""  ,function(res){
								if(res.status == 2){
									app.$message({
							          message: '删除成功',
							          type: 'success'
							        });
									
									// 回调查询
									app.search() ;
								}else{
									app.$message.error(res.statusMsg);
								}
							});
				        	
				        }).catch(()=>{} ) ;
				}
			},
			created(){
				this.height = window.innerHeight - 60; ;
				this.aheight = window.innerHeight ;
				this.getSceneInfo({}) ;
			},
			mounted(){
				setTimeout(() => {
					this.fullscreenLoading = false ;					
				}, 300);
			}
		});
	</script>
</body>
	